import React, { useState } from "react";
// import { useTheme } from "@material-ui/styles";
import Grid from "@material-ui/core/Grid";
import Switch from "@material-ui/core/Switch";
import VerifyErrorBox from "./../components/VerifyErrorBox/VerifyErrorBox";
import Portfolio from "./../components/Portfolio/Portfolio";
import WalletsBox from "./../components/WalletsBox/WalletsBox";
import ActivityBox from "./../components/ActivityBox/ActivityBox";
import BuySellExchange from "./../components/BuySellExchange/BuySellExchange";
import BankAccounts from "./../components/BankAccounts/BankAccounts";
import CryptoWatch from "./../components/CryptoWatch/CryptoWatch";

import { useTranslation } from "react-i18next";

import { Typography } from "@material-ui/core";
import { setPalletTheme } from "../stores/themeSlicer";
import { useDispatch } from "react-redux";

const Dashboard = () => {
  const isProfileCompleted = true;
  const [darkState, setDarkState] = useState(true);
  const dispatch = useDispatch();

  // const theme = useTheme();
  // console.log("current theme --> ", theme);
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setDarkState(!darkState);
    const palletType = darkState ? "dark" : "light";
    dispatch(setPalletTheme(palletType));
  };
  const { t } = useTranslation();

  return (
    <>
      <Grid container alignContent="center" alignItems="center" spacing={5}>
        <Grid container item xs={12}>
          <Grid item xs={10}>
            {!isProfileCompleted ? (
              <VerifyErrorBox />
            ) : (
              <Typography
                color="textPrimary"
                variant="h3"
                style={{ fontSize: "38px" }}
              >
                {t("dashboard:user-dashboard-greeting")}
                <span className="text-primary font-weight-bold ">
                  {" "}
                  Ali kamsari !
                </span>
              </Typography>
            )}
          </Grid>
          <Grid item xs={2} className="switcher-theme mt-2">
            <Typography variant="h6" color="textPrimary" className="mr-2">
              Dark Mode
            </Typography>
            <Switch
              checked={!darkState}
              onChange={handleChange}
              color="primary"
              name="isDark"
              classes={{
                root: "switcher-container",
              }}
              style={{
                width: "24px",
                height: "26px",
              }}
            />
          </Grid>
        </Grid>
        <Grid item md={12}>
          <CryptoWatch />
        </Grid>
        <Grid container item xs={12} spacing={2}>
          <Grid container item xs={11} md={5} spacing={0}>
            <Grid item xs={12}>
              <Portfolio />
            </Grid>
            <Grid item xs={12}>
              <BankAccounts />
            </Grid>
          </Grid>
          <Grid container item xs={12} md={7} spacing={2}>
            <Grid item xs={12}>
              <BuySellExchange />
            </Grid>
            <Grid item xs={12}>
              <WalletsBox />
            </Grid>
            <Grid item xs={12}>
              <ActivityBox />
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </>
  );
};

export default Dashboard;
